<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>添加空气质量信息</title>
  <style>
    body {
      font-family: "微软雅黑", Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      width: 400px;
      padding: 20px;
    }

    h2 {
      text-align: center;
      color: #333;
      font-size: 24px;
      margin-bottom: 20px;
    }

    form table {
      width: 100%;
      border-collapse: collapse;
    }

    form table tr {
      margin-bottom: 10px;
    }

    form table td {
      padding: 5px 0; /* 缩短文字与文本框的间距 */
    }

    input[type="text"],
    input[type="number"],
    select {
      width: 90%; /* 缩短文本框宽度 */
      padding: 6px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 14px;
    }

    .button-group {
      text-align: center;
      margin-top: 20px;
    }

    .button-group input[type="submit"],
    .button-group input[type="reset"],
    .button-group .btn-back {
      width: auto; /* 自动调整按钮宽度 */
      padding: 10px 20px; /* 按钮内边距 */
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      margin-right: 10px; /* 按钮之间的间距 */
    }

    .button-group .btn-back {
      background-color: #007bff;
    }

    .button-group input[type="submit"]:hover,
    .button-group input[type="reset"]:hover,
    .button-group .btn-back:hover {
      background-color: #0056b3;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(function () {
      // 监听表单提交事件
      $('#addAirQualityForm').on('submit', function (event) {
        event.preventDefault(); // 阻止默认的表单提交行为

        // 收集表单数据
        var data = {
          district: {
            id: $('select[name="district"]').val()
          },
          monitorTime: $('input[name="monitorTime"]').val(),
          pm10: $('input[name="pm10"]').val(),
          pm2_5: $('input[name="pm2_5"]').val(),
          monitoringStation: $('input[name="monitoringStation"]').val()
        };

        // 发送 POST 请求
        $.ajax({
          url: '/addAirQuality',
          contentType: 'application/json', // 确保设置为 JSON
          data: JSON.stringify(data),      // 序列化为 JSON 字符串
          type: 'POST',
          success: function (response) {
            alert("添加成功");

            setTimeout(function() {
              window.location.href = "airQuality.html";
            }, 1000);
          },
          error: function (xhr, status, error) {
            alert('Error: ' + xhr.responseText);
          }
        });
      });

      // 返回按钮事件
      $('.btn-back').on('click', function () {
        window.location.href = "airQuality.html";
      });
    });
  </script>
</head>
<body>
<div class="container">
  <h2>添加空气质量信息</h2>
  <form id="addAirQualityForm" method="post">
    <table>
      <tr>
        <td>监测区域：</td>
        <td>
          <select name="district" required>
            <option value="">请选择</option>
            <option value="1">西城区</option>
            <option value="2">东城区</option>
            <option value="3">海淀区</option>
            <option value="4">丰台区</option>
            <option value="5">朝阳区</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>监测日期：</td>
        <td><input type="text" name="monitorTime" placeholder="YYYY-MM-DD" required/></td>
      </tr>
      <tr>
        <td>PM10值：</td>
        <td><input type="number" name="pm10" required/></td>
      </tr>
      <tr>
        <td>PM2.5值：</td>
        <td><input type="number" name="pm2_5" required/></td>
      </tr>
      <tr>
        <td>监测站：</td>
        <td><input type="text" name="monitoringStation" required/></td>
      </tr>
    </table>
    <div class="button-group">
      <input type="submit" value="保存" class="btn-save"/>
      <input type="reset" value="重置" class="btn-reset"/>
      <button type="button" class="btn-back">返回</button>
    </div>
  </form>
</div>
</body>
</html>
